import 'package:flutter/material.dart';
import 'package:flutter_animate/flutter_animate.dart';
import 'package:flutter_slidable/flutter_slidable.dart';
import 'package:get/get.dart';
import 'package:todo/controllers/task_controller.dart';
import 'package:todo/models/task_model.dart';
import 'package:todo/views/add_task_screen.dart';

class HomeScreen extends StatefulWidget {
  const HomeScreen({super.key});

  @override
  State<HomeScreen> createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  // 初始化 taskController
  // `Get.put` 是 GetX 框架中的一个方法，用于将一个控制器添加到 GetX 框架中，以便在应用程序中使用这个控制器
  final TaskController taskController = Get.put(
    TaskController(),
  ); // 初始化 taskController

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      appBar: AppBar(
        backgroundColor: Colors.deepPurple,
        title: Text(
          'My Tasks',
          style: TextStyle(fontWeight: FontWeight.bold, color: Colors.white),
        ),
      ),
      //EdgeInsets.symmetric(horizontal: 10, vertical: 10) 是 Flutter 框架中的一个类，用于定义一个矩形的边距，用于调整应用程序的布局和字体大小
      // `horizontal: 10` 表示水平方向的边距为 10，`vertical: 20` 表示垂直方向的边距为 10
      body: Padding(
        padding: EdgeInsets.symmetric(horizontal: 10, vertical: 20),
        child: Obx(() {
          return taskController.taskList.isEmpty
              ? Center(
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: [
                    Icon(
                      Icons.article_rounded,
                      color: Colors.deepPurple,
                      size: 80,
                    ),
                    SizedBox(height: 20),
                    Text(
                      'No Tasks!',
                      style: TextStyle(
                        fontSize: 24,
                        fontWeight: FontWeight.bold,
                      ),
                    ),
                  ],
                ),
              )
              : ListView.builder(
                itemCount: taskController.taskList.length,
                itemBuilder: (context, index) {
                  var task = taskController.taskList[index];
                  //Slidable 是 Flutter 框架中的一个类，用于创建一个可滑动的组件，例如：删除、编辑等操作
                  return Slidable(
                    key: ValueKey(index), // 确保每个 Slidable 有一个唯一的 key
                    startActionPane: ActionPane(
                      motion: DrawerMotion(), // 定义滑动操作的动画效果，例如：从左侧滑出，从右侧滑出等;
                      extentRatio: 0.25, // 定义滑动操作的宽度，例如：0.25 表示宽度为屏幕的 25%,
                      children: [
                        SlidableAction(
                          // 定义滑动操作，例如：删除、编辑等操作
                          borderRadius: BorderRadius.circular(
                            15,
                          ), // 定义滑动操作的圆角，例如：10 表示圆角为 10px,
                          autoClose:
                              true, // 定义滑动操作是否自动关闭，例如：true 表示滑动操作完成后自动关闭,
                          onPressed: // 定义滑动操作的回调函数
                              (context) => {
                                Get.to(
                                  () => AddTaskScreen(task: task, index: index),
                                ),
                              },
                          backgroundColor: Colors.indigo, // 定义滑动操作的背景颜色，例如：红色
                          icon: Icons.edit, // 定义滑动操作的图标
                          label: 'Edit', // 定义滑动操作的标签
                        ),
                      ],
                    ),
                    endActionPane: ActionPane(
                      motion: DrawerMotion(), // 定义滑动操作的动画效果，例如：从左侧滑出，从右侧滑出等;
                      extentRatio: 0.25, // 定义滑动操作的宽度，例如：0.25 表示宽度为屏幕的 25%
                      children: [
                        SlidableAction(
                          borderRadius: BorderRadius.circular(
                            15,
                          ), // 定义滑动操作的圆角，例如：10 表示圆角为 10px,
                          autoClose:
                              true, // 定义滑动操作是否自动关闭，例如：true 表示滑动操作完成后自动关闭,
                          onPressed: (context) {
                            taskController.deleteTask(index); // 删除任务
                          },
                          backgroundColor:
                              Colors.redAccent, // 定义滑动操作的背景颜色，例如：红色
                          foregroundColor: Colors.white,
                          icon: Icons.delete, // 定义滑动操作的图标
                          label: 'Delete', // 定义滑动操作的标签
                        ),
                      ],
                    ),
                    child: taskCard(task, index),
                  ).animate().fade().slide(
                    duration: 300.ms,
                  ); // 定义任务卡片的动画效果，例如：从左侧滑出，从右侧滑出等;
                },
              );
        }),
      ),
      floatingActionButton: FloatingActionButton(
        //Get.to(() => AddTaskScreen()) 是 GetX 框架中的一个方法，用于跳转到一个新的页面，例如：添加任务页面
        onPressed: () => {Get.to(() => AddTaskScreen())}, // 跳转到添加任务页面
        backgroundColor: Color(0xFF493AD5),
        foregroundColor: Colors.white,
        child: Icon(Icons.add),
      ),
    );
  }

  Widget taskCard(Task task, int index) {
    return Card(
      elevation: 10, // 定义任务卡片的阴影效果，例如：3 表示阴影的高度为 3px,
      margin: EdgeInsets.symmetric(vertical: 10), // 定义任务卡片的边距，例如：10px,
      shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.circular(10), // 定义任务卡片的圆角，例如：10px,
      ),
      child: Column(
        children: [
          LinearProgressIndicator(
            value:
                task.isCompleted
                    ? 1
                    : 1 -
                        (task.dueDate.difference(DateTime.now()).inDays) /
                            (task.countDown ??
                                100), // 定义任务卡片的进度条，例如：0.5 表示进度条的进度为 50%，1 表示进度条的进度为 100%，0 表示进度条的进度为 0%，,
            minHeight: 5, // 定义任务卡片的进度条的高度，例如：5px,
            backgroundColor: Colors.grey.shade300, // 定义任务卡片的进度条的背景颜色，例如：灰色,
            color: Colors.deepPurple, // 定义任务卡片的进度条的颜色，例如：红色,
          ),
          taskTile(task, index),
        ],
      ),
    );
  }

  Widget taskTile(Task task, int index) {
    return ListTile(
      contentPadding: EdgeInsets.all(10), // 定义任务卡片的内边距，例如：10px,
      // onTap: () => {Get.to(() => AddTaskScreen(task: task, index: index))},
      title: Text(
        task.title, // 定义任务卡片的标题，例如：任务标题,
        style: TextStyle(
          fontWeight: FontWeight.bold, // 定义任务卡片的标题的字体，例如：粗体,
          fontSize: 18, // 定义任务卡片的标题的字体大小，例如：18px,
          decoration:
              task
                      .isCompleted // 定义任务卡片的标题的下划线，例如：下划线,
                  ? TextDecoration
                      .lineThrough // 定义任务卡片的标题的下划线的样式，例如：下划线,
                  : TextDecoration.none, // 定义任务卡片的标题的下划线的样式，例如：无下划线,
        ),
      ),
      subtitle: Column(
        crossAxisAlignment:
            CrossAxisAlignment
                .start, // 定义任务卡片的副标题的对齐方式，例如：左对齐，右对齐，居中对齐等;CrossAxisAlignment.start 表示左对齐，CrossAxisAlignment.end 表示右对齐，CrossAxisAlignment.center 表示居中对齐,
        children: [
          Divider(), // 定义任务卡片的分割线，例如：分割线,
          Text(
            task.description, // 定义任务卡片的副标题，例如：任务描述,
            style: TextStyle(
              fontSize: 14, // 定义任务卡片的副标题的字体大小，例如：14px,
              color: Colors.grey.shade600,
              decoration:
                  task.isCompleted
                      ? TextDecoration.lineThrough
                      : null, // 定义任务卡片的副标题的下划线，例如：下划线,
            ),
          ),
          Divider(),
          Text(
            '${task.dueDate!.toLocal()}'.split(' ')[0], // 定义任务卡片的副标题，例如：任务描述,
            style: TextStyle(
              fontSize: 14, // 定义任务卡片的副标题的字体大小，例如：14px,
              color: Colors.deepPurple,
              fontWeight: FontWeight.bold,
            ),
          ),
        ],
      ),
      trailing: IconButton(
        // 定义任务卡片的右侧图标按钮，例如：删除按钮,
        onPressed: () {
          taskController.toggleTaskCompletion(
            index,
          ); // 定义任务卡片的右侧图标按钮的点击事件，例如：删除任务,
        },
        icon: Icon(
          task.isCompleted
              ? Icons
                  .check_circle_rounded // 定义任务卡片的右侧图标按钮的图标，例如：删除图标,
              : Icons.circle_outlined, // 定义任务卡片的右侧图标按钮的图标，例如：删除图标,
          color:
              task.isCompleted
                  ? Colors.deepPurple
                  : Colors.grey, // 定义任务卡片的右侧图标按钮的图标颜色，例如：红色,
        ),
      ),

      leading: Icon(
        Icons.task_alt, // 定义任务卡片的图标，例如：任务图标,
        color:
            task.isCompleted
                ? Colors.deepPurple
                : Colors.grey, // 定义任务卡片的图标颜色，例如：红色,
        size: 24, // 定义任务卡片的图标大小，例如：30px,
      ),
    );
  }
}
